The software architecture of a system is the highest structure of the
whole system. Most web applications have a similar architecture. Your web application will make use of several web technologies that are discussed in this lesson to provide more detail about how you will implement the UI tier components in your application.
Learning Outcomes
Describe the fundamental web application architecture
Develop UI-tier code for a web application
Use Maven to build and run a web application
Use browser developer tools to debug webapps
Study Resources
For your study of this topic, use these resources.
Resources
The course resources page has many good links for Spark, FreeMarker and web technologies.
Each team member will need to be able to build and execute a Spark-based web application. Your instructor will walk you through the steps to do this for a sample webapp during a class session. You will need to have access to Java 8 and maven. These tools are setup on the machines in the SE labs or you can set them up on your own laptop referring to information on the resources page for installing Java and maven. If you are going to use your laptop, make sure to bring this to the class when your section is doing Build and run the sample webapp.
To demonstrate that you can run both of these tools, open a command or terminal window, and execute the following commands:
mvn --version
javac -version
java -version
Note: If maven indicates that JAVA_HOME needs to be defined or later it can not find a Java compiler, you need to define the environment variable JAVA_HOME to point to the base of your installed JDK. On the SE lab machines, you can do this by selecting Start, type Accounts, User accounts -> Change my environment variables. You will have to find the latest JDK installed on the system. It will be either C:\Program Files\Java\jdk#.#.#_# or C:\Program Files (x86)\Java\jdk#.#.#_#. Set the JAVA_HOME environment variable to the proper directory.
Make a screen grab of the window showing the output generated by these commands, and deposit the image in the myCourses dropbox, Setup the webapp build environment - individual, by the date specified on the schedule for your section.
In-Class Exercise
Build and run the sample webapp - individual
Your instructor will walk the entire class through the process of building and running the sample webapp from the command line. Your instructor will guide you through these instructions:
Download the sample webapp ZIP file. Extract the files from the zip file to an easy to locate directory.
Open a terminal window (Command Prompt - Windows; Terminal - Mac) and navigate to the directory where you extracted the sample webapp files. This is the directory with the pom.xml file that describes how to build and execute the sample webapp.
Execute the command mvn compile exec:java which first builds the application and then starts the webapp running in a local jetty web server.
There should be no errors during the compile, and the last thing you see should be the local jetty webserver starting on localhost:4567.
Open a web browser and navigate to localhost:4567. Have fun with the sample webapp.
Take a screen capture of the command window showing the starting of the sample webapp. By the date specified on the schedule for your section, deposit the image in the myCourses dropbox, Build and run the sample webapp - individual.
If time permits, experiment with the sample webapp by changing application values or the headings/text in the HTML template. You need to stop the webserver, rebuild the webapp, and start the webapp again for any changes to take effect.
If IntelliJ is your preferred development tool, the sample webapp setup Guide provides information for how to create a maven project in IntelliJ.
After-Class Exercises
Web architecture and development - individual
Analyze the implementation of the sample webapp provided to you.
Download the Guessing Game Analysis Word document and fill it in based on your analysis of the sample webapp.
By the date specified on the schedule for your class section, deposit the file with your completed analysis into the Web architecture and development - individual dropbox in the Exercises area of the myCourses dropboxes.
After experimenting with the sample webapp and doing your architectural analysis of it, you will enhance its operation with new features. The sample webapp enhancements are described here.
Complete your enhancements by the date specified in the schedule for your section, and submit a zipfile of your enhanced application to the Sample webapp enhancements - individual dropbox in the myCourses Individual Exercises dropbox area. Follow the instructions here to create the zipfile to submit.
